<script setup>
import { ref } from "vue"
import {addGroup,getGroup,updateGroup} from "../../utils/db"
import {} from "../../api/index"
import {getCurrentGroupId,setCurrentGroupId} from "../../utils/ops"

const {main} = defineProps(['main'])

const titleInputRef = ref();



const handleEdit = async () => {
    const val = titleInputRef.value.value;
    main.upChatTitle(val)
}
</script>

<template>
    <div class="w-full h-40 relative p-y-4 flex items-center justify-between text-20">
        <div class="flex items-center gap-10">
            <!-- logo -->
            <img class="h-full w-auto" :src="''" />
            <!-- new chat -->
            <div class="flex items-center gap-4 cursor-pointer rd-20 bg-#ffffff88 p-x-20 p-y-6 c-#999 hover-c-#333 hover-shadow-md" @click="main.newChat">
                <div class="i-flat-color-icons:plus text-20"></div>
                <span class="text-16">新建会话</span>
            </div>
            <!-- history -->
             <div class="flex items-center gap-4 cursor-pointer rd-20 bg-#ffffff88 p-6 c-#999 hover-c-#333 hover-shadow-md" @click="main.hisDialog.value = !main.hisDialog.value">
                <div class="i-fluent-color:history-16 text-20"></div>
                <!-- <span class="text-16">历史会话</span> -->
             </div>
            
        </div>
        <div class="w-60% flex items-center text-center justify-center" v-show="main.current.title">
            <input ref="titleInputRef" class="w-full c-#333 fw-bold b-1 b-solid p-y-4 b-transparent truncate outline-none focus-b-#409EFF shadow-none bg-transparent text-20 rd-8 p-x-10 hover-b-#fff text-center" :value="main.current.title" @blur="handleEdit" />
           <!-- <div v-if="!isEdit" class="flex-1 truncate">{{ title }}</div>
           <div v-else><input ref="titleInputRef" :value="title" /></div>
           <div v-if="!isEdit" class="i-line-md:edit-twotone cursor-pointer" @click="isEdit = true"></div>
           <div v-else class="i-line-md:confirm-square" @click="handleEdit"></div> -->
        </div>
        <div class="flex items-center w-100">
            <span></span>
        </div>
    </div>
</template>
